<template>
  <div>
    <Breadcrumb :style="{ margin: '15px 0' }">
      <BreadcrumbItem>首页</BreadcrumbItem>
      <BreadcrumbItem>财务管理</BreadcrumbItem>
      <BreadcrumbItem>账单明细</BreadcrumbItem>
    </Breadcrumb>
    <Content class="layer-content">
      <Form class="search" inline>
        <FormItem>
          <Input style="width: 300px" v-model="keywords" search enter-button placeholder="请输入关键字" @on-search="doSearch" @submit.native.prevent/>
        </FormItem>
        <FormItem>
          <Select placeholder="交易状态" v-model="query.equal.refundStatus" clearable @on-change="payFilter" style="width:100px">
            <Option :value="0" key="0">支付</Option>
            <Option :value="1" key="1">退款</Option>
          </Select>
        </FormItem>
        <FormItem>
          <Button @click="reset">重置</Button>
          <Button icon="ios-download-outline" @click="Export">导出</Button>
        </FormItem>
      </Form>
      <Table ref="tableGrid" border stripe :columns="columns" :data="dataGrid"></Table>
      <HigPager v-model="query" :total="pageTotal" :init="Init"></HigPager>
    </Content>
  </div>
</template>
<script>
export default {
  name: "Index",
  data() {
    return {
      excelHead: "我的账单",
      keywords: null,
      dataGrid: [],
      query: {
        equal: {
          orgId: this.$store.getOrg('orgId'),
          payStatus: 1
        },
        pageIndex: 1,
        pageSize: 10
      },
      pageTotal: 0,
      columns: [
        {
          title: "index",
          key: "shopOrderId",
          fixed: "left",
          width: 60,
          type: "selection",
        },
        {
          title: "交易流水",
          key: "prepayOrderId",
          align: "center",
          width: 200,
          sortable: true
        },
        {
          title: "客户名称",
          key: "custName",
          width: 120,
          align: "left",
        },
        {
          title: "订单名称",
          key: "orderName",
          align: "left",
        },
        {
          title: "订单号",
          key: "shopOrderId",
          align: "center",
          width: 200,
          sortable: true
        },
        {
          title: "交易金额",
          key: "orderActualAmt",
          align: "center",
          width: 120,
          sortable: true
        },
        {
          title: "退款金额",
          key: "refundAmt",
          align: "center",
          width: 120,
          sortable: true
        },
        {
          title: "结算金额",
          key: "settleAmt",
          align: "center",
          width: 120,
          sortable: true
        },
        {
          title: "交易时间",
          key: "postTime",
          align: "center",
          width: 180,
        }
      ]
    }
  },
  created() {
    this.Init()
  },
  components: {
    
  },
  methods: {
    doSearch() {
      let sqlLike = {
        fields: ['shop_order_id','cust_name','shop_name','order_name'],
        keyword: this.keywords
      }
      this.query.sqlLike = sqlLike
      this.Init()
    },
    payFilter(status) {
      if(!this.query.equal) this.query.equal = {}
      this.query.equal.refundStatus = Number(status)
      this.Init()
    },
    //重置
    reset() {
      delete this.query.sqlLike
      delete this.query.equal.refundStatus
      this.keywords = null
      this.Init()
    },
    Init() {
      new this.$rest({
        gateway: 'agrobiz',
        service: "agrobiz-order",
        url: "/v1.0/mall/goods/order/page",
        query: this.query,
        action: (res) => {
          if (res.data.code === 20000) {
            const data = res.data.data
            this.pageTotal = data.count
            data.list.forEach(element => {
              element.postTime = this.$date(element.postTime,'yyyy-MM-dd HH:mm:ss')
              // element.orderActualAmt = '+' + element.orderActualAmt
            });
            this.dataGrid = data.list
          } else {
            this.$Notice.warning({
              title: "获取失败",
              desc: `失败原因：${res.data.msg}`,
            });
          }
        },
      }).get();
    },
    //导出
    Export() {
      this.$Modal.confirm({
        title: '温馨提示',
        content: '确认导出Excel文件吗？',
        onOk: () => {
          this.$refs.tableGrid.exportCsv({
            filename: `${this.$store.getOrg('orgName')}_${new Date().getTime()}`,
            original: false
          })
        }
      })
    }
  },
};
</script>
<style lang="less" scoped>
.caigou {
  text-align: center;
  font-size: 18px;
}
.title-name {
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  margin: 0;
  line-height: 48px;
}
.type-area {
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #3333;
  display: flex;
  justify-content: space-between;
}
.name-area {
  display: inline-block;
  width: 148px;
}
.content-names {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
}
.content-name {
  display: inline-block;
  text-align: left;
  font-size: 18px;
  width: 385px;
}
.footer {
  display: flex;
  justify-content: end;
  margin-top: 25px;
}
.order {
  width: 100%;
}
.title {
  width: 100%;
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  height: 100px;
}
.bottom {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}
.bottom-box {
  width: 200px;
  border-bottom: 1px solid #333;
}
.bottom-right {
  display: flex;
  width: 50%;
}
.bottom-left {
  display: flex;
  width: 50%;
}
.top-box {
  display: flex;
  width: 100%;
  margin-bottom: 10px;
}
.box-item {
  width: calc(100% / 3);
}
</style>